<template>
    <div class="app-contain">
        <el-form label-width="120px" class="app-content" :rules="rules" :model="ruleForm3" ref="ruleForm3">
        <div class="appTop">
            <el-col :span="15">填写信息</el-col>
            <el-col :span="3" :offset="6" class="hotLine">客服热线 400-6002-588</el-col>
        </div>
            <div class='box'>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="银行开户名" prop="bankAccountName"> 
                            <el-input v-model="ruleForm3.bankAccountName" placeholder="请输入银行开户名" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="账户号码" prop="accountName">
                            <el-input v-model="ruleForm3.accountName" placeholder="请输入账户号码" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属银行" prop="bankAccountId">
                            <el-select v-model="ruleForm3.bankAccountId" placeholder="不支持信用卡，存折认证" style="width:100%">
                                <el-option v-for="item in bankAccountIdList" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开户行名称" prop="bankBranchName">
                            <el-input v-model="ruleForm3.bankBranchName" placeholder="请务必填写完整的开户行名称，如“中国银行长江路支行”" :maxlength="40"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="开户行所在城市" prop="fProvinceId">
                            <province v-model="ruleForm3.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="fCityId" label-width='10px'>
                            <city v-model="ruleForm3.fCityId" :province="ruleForm3.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="预留手机号" prop="phone">
                            <el-input v-model="ruleForm3.phone" placeholder="请输入预留手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" class='idfyCode'>
                        <el-form-item  label-width='32px'>
                            <el-button type="primary" class='getIdfy' @click="idfyCodeClick" :disabled='disabledBtn'>{{ruleForm3.idfyCode}}</el-button><span v-if="ruleForm3.idfyCode != '获取验证码'">后可再次获取</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="短信验证码" prop="fyCode">
                            <el-input v-model="ruleForm3.fyCode" placeholder="短信验证码" :maxlength="6"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" class='idfyNote'>
                        <span>无法接收验证码？ 请咨询客服热线 400-6002-588</span>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script>
import imgUpload from 'components/Upload/imgUpload';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import validate from '@/utils/validate';
import { register, captchcode, listBankCards} from 'api/accountMangement';
import { getRule } from 'api/login';
import sha256 from 'sha256';
export default{
    components: {imgUpload, province, city},
    props: {
        ruleForm3: {
            type: Object,
            required: true
        }
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入验证码'));
            } else {
                captchcode(this.ruleForm3.fyCode, this.ruleForm3.phone).then(res => {
                    if (res.data.content=='0' || res.data.content=='1') {
                        callback(new Error('验证码已过期或者验证码输入不正确'));
                    } else {
                        callback();
                    }
                })
            }
        };
        // var validateBankAccountName = (rule, value, callback) => {
        //     if (value === '') {
        //         callback(new Error('请输入银行开户名'));
        //     } else if (this.ruleForm3.name!=this.ruleForm3.bankAccountName) {
        //         callback(new Error('开户名需要跟公司营业执照上的名称保持一致'));
        //     } else {
        //         callback();
        //     }
        // };
        return {
            bankAccountIdList: '',
            disabledBtn: false,
            pRule: { 
                pstart: '',
                pend: '',
                oc: ''
            },
            rules: {
                bankAccountName: [
                    { required: true, message: '请输入银行开户名', trigger: 'blur'}
                ],
                accountName: [
                    { required: true, message: '请输入账户号码', trigger: 'blur'},
                    { pattern: /^\d{5,20}$/, message: '账户格式不正确', trigger: 'blur'}
                ],
                bankAccountId: [
                    { required: true, message: '请选择所属银行', trigger: 'change'}
                ],
                bankBranchName: [
                    { required: true, message: '请输入开户行支行名称', trigger: 'blur'},
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                fProvinceId: [
                    { required: true, message: '请选择开户行所在省', trigger: 'change'}
                ],
                fCityId: [
                    { required: true, message: '请选择开户行所在市区', trigger: 'change'}
                ],
                phone: [...validate.phoneRequired()],
                fyCode: [
                    { required: true, validator: validatePass, trigger: 'blur'},
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ]
            }
        }
    },
    created() {
        this.getListBankCards();
        this.getpRule();
    },
    methods: {
        // 提交
        submitForm() {
            this.$refs['ruleForm3'].validate((valid) => {
                if (valid) {
                    this.$emit('getSubmitForm', 'true');
                }
            });
        },
        // 获取银行列表
        getListBankCards() {
            listBankCards().then(res => {
                this.bankAccountIdList = res.data.content;
            })
        },
        // 获取安全规则
        getpRule() {
            getRule().then(res => {
                this.pRule.pstart = res.data.content.ps;
                this.pRule.pend = res.data.content.pe;
                this.pRule.oc = res.data.content.oc;
            }).catch(e => {
                console.log(e);
            })
        },
        // 安全码的计算 by cuihd 20180702
        // ps表示截取手机号的开始位置，pe表示截取手机号的结束位置，oc表示运算符种类（0表示与运算 1表示或运算 2表示异或）
        getCutNum(phone, timeStamp, ps, pe, oc) {
            let cutNum;
            ps = Number(ps); // 强制转换成数字
            pe = Number(pe);
            phone = String(phone);
            timeStamp = String(timeStamp);         
            phone = Number(phone.substring(ps, pe)); // 截取ps-pe之间的数
            timeStamp = Number(timeStamp.substring(timeStamp.length-4)); // 截取时间戳的后四位
            switch (oc) {
                case '0': // 0表示与运算
                    cutNum = phone & timeStamp;
                    break;
                case '1': // 1表示或运算
                    cutNum = phone | timeStamp;
                    break;
                default: // 2表示异或
                    cutNum = phone ^ timeStamp;
                    break;
            } 
            // 进行sha256加密
            return sha256(String(cutNum))
        },
        // 点击验证码
        idfyCodeClick() {
            this.$refs['ruleForm3'].validateField('phone', (valid) => {
                if (valid=='') {
                    if (this.ruleForm3.idfyCode == '获取验证码') {
                        this.disabledBtn = true;
                        let verification, timeStamp;
                        timeStamp = new Date().getTime();// 时间戳
                        timeStamp = String(timeStamp);
                        verification = this.getCutNum(this.ruleForm3.phone, timeStamp, this.pRule.pstart, this.pRule.pend, this.pRule.oc); // 安全码
                        register(this.ruleForm3.phone, verification, timeStamp).then(res => {
                            this.disabledBtn = false;
                            let time = 90;
                            this.ruleForm3.idfyCode = time + 's';
                            let set = setInterval(() => {
                                time--;
                                this.ruleForm3.idfyCode = time + 's';
                                if (time==0) {
                                    this.ruleForm3.idfyCode = '获取验证码';
                                    clearInterval(set)
                                }
                            }, 1000);
                        }).catch(res => {
                            this.disabledBtn = false;
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    .el-form{
        background:#fff;
        padding-bottom:50px;
        .appTop{
            padding:10px 0 20px 0px;
            margin-bottom:30px;
            font-size:36px;
            .hotLine{
                color:#ccc;
                font-size:12px;
            }
        }
        .note{
            color:#999;
            font-size:12px;
            padding-left:46px;
        }
        .informationMs{
            font-size:12px;
            color:#999999
        }
        .noteT{
            color:#999;
            font-size:12px
        }
        .boxContent{
            padding-top:50px
        }
        .box{
            margin-top:90px;
        }
        .appTitle{
            padding:40px 0 30px 50px;
            margin-bottom:30px;
            padding-top:10px;
            text-align:center;
            border-bottom:1px solid #ECECEC
        }
        .Top{
            margin-top:50px !important;
        }
        .require{
            color:#999999;
            font-size:14px;
            line-height:30px;
        }
        .idfyCode{
            span{
                font-size:13px;
                margin-left:15px;
                color:#999999
            }
        }
        .getIdfy{
            width:102px;
        }
        .idfyNote{
            font-size:13px;
            color:#999;
            line-height:38px;
            padding-left:15px;
        }
    }
    
}

</style>
